<template>
    <div class="login-container">
      <!-- 粒子背景 -->
      <Particles
        id="tsparticles"
        :options="particlesOptions"
        @particles-loaded="particlesLoaded"
      />
      
      <!-- 注册卡片 -->
      <el-card 
        class="login-card"
        @mousemove="handleCardMove"
        @mouseleave="resetCard"
      >
        <!-- 3D旋转Logo容器 -->
        <div 
          class="logo-container" 
          @mousemove="handleLogoMove"
          @mouseleave="resetLogo"
        >
          <div class="logo" :style="logoStyle">
            <el-icon :size="50" color="white">
              <Edit />
            </el-icon>
          </div>
        </div>
        
        <h1 class="title">用户注册</h1>
        <p class="subtitle">创建您的账号</p>
        
        <el-form 
          ref="registerFormRef" 
          :model="form" 
          :rules="rules" 
          @keyup.enter="handleRegister"
        >
          <el-form-item prop="username">
            <el-input
              v-model="form.username"
              placeholder="请输入用户名"
              :prefix-icon="User"
              size="large"
              class="custom-input"
            />
          </el-form-item>
          
          <el-form-item prop="email">
            <el-input
              v-model="form.email"
              placeholder="请输入邮箱"
              :prefix-icon="Message"
              size="large"
              class="custom-input"
            />
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              type="password"
              placeholder="请输入密码"
              :prefix-icon="Lock"
              size="large"
              show-password
              class="custom-input"
            />
          </el-form-item>
          
          <el-form-item prop="confirmPassword">
            <el-input
              v-model="form.confirmPassword"
              type="password"
              placeholder="请确认密码"
              :prefix-icon="Lock"
              size="large"
              show-password
              class="custom-input"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button
              type="primary"
              size="large"
              :loading="loading"
              @click="handleRegister"
              class="login-btn"
              round
            >
              {{ loading ? '注册中...' : '立即注册' }}
            </el-button>
          </el-form-item>
        </el-form>
        
        <div class="footer">
          <span>已有账号?</span>
          <el-link type="primary" @click="router.push('/login')" underline="never">去登录</el-link>
        </div>
      </el-card>
      
      <!-- 背景装饰元素 -->
      <div class="decor decor-1"></div>
      <div class="decor decor-2"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { User, Lock, Message, Edit } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import { loadSlim } from 'tsparticles-slim'
  import { useAuthStore } from '@/stores/user'
  
  const authStore = useAuthStore()
  const router = useRouter()
  
  // 表单数据
  const form = reactive({
    username: '',
    email: '',
    password: '',
    confirmPassword: ''
  })
  
  // 表单验证规则
  const validatePassword = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('请输入密码'))
    } else if (value.length < 6) {
      callback(new Error('密码长度不能少于6位'))
    } else {
      if (form.confirmPassword !== '') {
        registerFormRef.value.validateField('confirmPassword')
      }
      callback()
    }
  }
  
  const validateConfirmPassword = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('请再次输入密码'))
    } else if (value !== form.password) {
      callback(new Error('两次输入密码不一致!'))
    } else {
      callback()
    }
  }
  
  const rules = reactive({
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 16, message: '长度在3到16个字符', trigger: 'blur' }
    ],
    email: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
    ],
    password: [
      { required: true, validator: validatePassword, trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, validator: validateConfirmPassword, trigger: 'blur' }
    ]
  })
  
  // 状态数据
  const loading = ref(false)
  const registerFormRef = ref(null)
  
  // 3D效果变量（与登录页面相同）
  const logoStyle = reactive({
    transform: 'rotateX(0deg) rotateY(0deg)',
    transition: 'transform 0.5s ease'
  })
  
  const cardStyle = reactive({
    transform: 'perspective(1000px) rotateX(0deg) rotateY(0deg)',
    transition: 'transform 0.5s ease'
  })
  
  // 3D效果处理函数（与登录页面相同）
  const handleLogoMove = (e) => {
    const boundingRect = e.currentTarget.getBoundingClientRect()
    const x = e.clientX - boundingRect.left
    const y = e.clientY - boundingRect.top
    const centerX = boundingRect.width / 2
    const centerY = boundingRect.height / 2
    const rotateY = (x - centerX) / 20
    const rotateX = (centerY - y) / 10
    
    logoStyle.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
  }
  
  const handleCardMove = (e) => {
    const boundingRect = e.currentTarget.getBoundingClientRect()
    const x = e.clientX - boundingRect.left
    const y = e.clientY - boundingRect.top
    const centerX = boundingRect.width / 2
    const centerY = boundingRect.height / 2
    const rotateY = (x - centerX) / 30
    const rotateX = (centerY - y) / 30
    
    cardStyle.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
  }
  
  const resetLogo = () => {
    logoStyle.transform = 'rotateX(0deg) rotateY(0deg)'
  }
  
  const resetCard = () => {
    cardStyle.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)'
  }
  
  // 粒子效果配置（与登录页面相同）
  const particlesOptions = {
    background: {
      color: "#0a1f3a"
    },
    particles: {
      number: {
        value: 80,
        density: {
          enable: true,
          area: 800
        }
      },
      color: {
        value: "#ffffff"
      },
      shape: {
        type: "circle"
      },
      opacity: {
        value: 0.5,
        random: true
      },
      size: {
        value: 3,
        random: true
      },
      links: {
        color: "#ffffff",
        distance: 150,
        enable: true,
        opacity: 0.4,
        width: 1
      },
      move: {
        enable: true,
        speed: 2,
        direction: "none",
        random: true,
        straight: false,
        outModes: {
          default: "bounce"
        }
      }
    },
    interactivity: {
      events: {
        onHover: {
          enable: true,
          mode: "repulse"
        },
        onClick: {
          enable: true,
          mode: "push"
        }
      },
      modes: {
        repulse: {
          distance: 100
        },
        push: {
          quantity: 4
        }
      }
    }
  }
  
  // 粒子初始化（与登录页面相同）
  const particlesInit = async (engine) => {
    await loadSlim(engine)
  }
  
  const particlesLoaded = async (container) => {
    console.log("粒子背景加载完成")
  }
  
  // 注册逻辑
  const handleRegister = async () => {
    try {
      await registerFormRef.value.validate()
      loading.value = true
      
      // 调用注册API
      const response = await authStore.register({
        username: form.username,
        email: form.email,
        password: form.password
      })
      
      if (response.success) {
        ElMessage.success('注册成功')
        router.push('/login') // 注册成功后跳转到登录页
      }
    } catch (error) {
      console.error('注册错误:', error)
      ElMessage.error(error.response?.data?.message || '注册失败')
    } finally {
      loading.value = false
    }
  }
  </script>
  
  <style scoped>
  /* 使用与登录页面相同的样式 */
  .login-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
  }
  
  #tsparticles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
  }
  
  .login-card {
    width: 450px; /* 稍微宽一点以容纳更多字段 */
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1;
    transform-style: preserve-3d;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
  }
  
  .login-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }
  
  .logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    perspective: 1000px;
    transform-style: preserve-3d;
  }
  
  .logo {
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, #E6A23C, #F56C6C); /* 使用不同的渐变颜色 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 20px rgba(230, 162, 60, 0.3);
    transform-style: preserve-3d;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
  }
  
  .logo:hover {
    transform: scale(1.1);
  }
  
  .title {
    text-align: center;
    margin-bottom: 8px;
    color: #303133;
    font-size: 28px;
    font-weight: 600;
    background: linear-gradient(45deg, #E6A23C, #F56C6C); /* 使用不同的渐变颜色 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .subtitle {
    text-align: center;
    margin-bottom: 30px;
    color: #909399;
    font-size: 14px;
  }
  
  .custom-input {
    transition: all 0.3s;
  }
  
  .custom-input:hover {
    transform: translateY(-2px);
  }
  
  .login-btn {
    width: 100%;
    margin-top: 10px;
    background: linear-gradient(45deg, #E6A23C, #F56C6C); /* 使用不同的渐变颜色 */
    border: none;
    letter-spacing: 2px;
    font-weight: 600;
    transition: all 0.3s;
  }
  
  .login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(230, 162, 60, 0.4);
  }
  
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    font-size: 14px;
    gap: 8px;
  }
  
  .decor {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    opacity: 0.1;
  }
  
  .decor-1 {
    width: 300px;
    height: 300px;
    background: #E6A23C;
    top: -100px;
    left: -100px;
  }
  
  .decor-2 {
    width: 200px;
    height: 200px;
    background: #F56C6C;
    bottom: -50px;
    right: -50px;
  }
  
  /* 输入框动画效果 */
  :deep(.el-input__wrapper) {
    transition: all 0.3s;
    background: rgba(255, 255, 255, 0.8);
  }
  
  :deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
    transform: translateY(-2px);
  }
  
  :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
  }
  </style>